import {
    HomeOutlined,
    DatabaseOutlined,
    DownOutlined,
    SmileOutlined
} from '@ant-design/icons';
import type {MenuProps} from 'antd';
import {Breadcrumb, Layout,Avatar, Menu, Space,Dropdown} from 'antd';
import React, {useState} from 'react';
import "./index.less";
import {Link} from "react-router-dom";

const {Header, Content, Footer, Sider} = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items: MenuItem[] = [
    getItem('主页', '1', <HomeOutlined />),
    getItem('数据管理', 'sub1', <DatabaseOutlined />, [
        getItem('数据字典', '3')
    ]),
];

const Index: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: (
                        <Link to={"/"}>
                            返回首页
                        </Link>
                    ),
                    icon: <HomeOutlined />,
                },
                {
                    key: '2',
                    label: (
                        <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                            退出登陆
                        </a>
                    ),
                    icon: <SmileOutlined />,
                }
            ]}
        />
    );
    return (
        <Layout style={{minHeight: '100vh'}}>
            <Sider breakpoint={"md"} collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                <div className="logo">
                    <img src={require("@/assets/img/logo.png")} alt=""/>
                    <span style={{display: collapsed ? "none" : "inline-block"}}>尚医通管理系统</span>
                </div>
                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items}/>
            </Sider>
            <Layout className="site-layout">
                <Header className="site-layout-background" style={{padding: 0}}>
                    <Breadcrumb style={{margin: '16px 0'}}>
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>

                    <Space>
                        <span>欢迎回来xxxx!</span>
                        <Dropdown overlay={menu}>
                            <a onClick={e => e.preventDefault()}>
                                <Avatar src="https://joeschmoe.io/api/v1/random" />
                            </a>
                        </Dropdown>
                    </Space>

                </Header>
                <Content style={{margin: '5PX'}}>

                    <div className="site-layout-background" style={{padding: 24, height:"100%"}}>
                        Bill is a cat.
                    </div>
                </Content>
                <Footer style={{textAlign: 'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        </Layout>
    );
};

export default Index;